<template>
  <a-radio-group
    v-bind="instance"
    v-model="defaultValue"
    @change="changeRadio($event.target)"
  >
    <span v-for="item in radioList" :key="item.value">
      <!-- <span v-if="item.isSelf" class="custom-radio-input" >
        <span style="marginRight:8px" @click="selectSelfInput">{{item.label}}:</span>
        <a-input-number v-bind="item" :min="0" :value="radioValue" @change="selfInput" />
      </span> -->
      <a-radio
        :value="item.value"
        :class="{ 'custom-radio-input': item.isSelf }"
      >
        <span>{{ item.label }}</span>
        <a-input-number
          v-if="item.isSelf"
          v-bind="item"
          :min="1"
          :value="radioInputValue"
          @change="selfInput"
        />
      </a-radio>
    </span>
  </a-radio-group>
</template>

<script>
export default {
  props: {
    instance: Object // 配置
  },
  data() {
    return {
      defaultValue: null,
      radioList: [], // 选项
      radioInputValue: '', // 自定义单选框值
      isSetting: false // 只设置一次
    }
  },
  watch: {
    instance: {
      handler(nVal) {
        Object.assign(this, { ...nVal }) // 把传入的参数，融合到this中
        this.initCustomInputValue()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.$on('initSettingCustomRadioInputValue', v =>
      this.$emit('setFormModelValue', 'inputValue', v)
    ) // 初始化默认设置一次和表单绑定的输入框的值
  },
  methods: {
    selfInput: function(v) {
      this.radioInputValue = v
      this.settingCustomRadioInputValue(v)
    },
    // 选中自定义输入
    // selectSelfInput() {
    //   const { prop, radioValue, isEdit } = this.instance
    //   if(isEdit) return
    //   this.resetForbidden('selfRadio')  // 解开禁用
    //   this.$emit('resetOptDefault', prop, '')
    //   this.$emit('setFormModelValue', prop, radioValue)
    // },
    // 给外部的表单设置自定义输入框中的值
    settingCustomRadioInputValue(v) {
      this.$set(this.instance, 'inputValue', v)
      this.$emit('setFormModelValue', 'inputValue', v)
    },
    // 清空
    // 重置自定义输入框的值和禁用状态
    resetSelfInput(value) {
      this.radioInputValue = '' // 清空自定义的输入框的值
      this.defaultValue = '' // 清空勾选的value
      if (value === -1) {
        this.settingCustomRadioInputValue('')
      }
      this.resetForbidden(value)
    },
    // 重置禁用
    resetForbidden(value) {
      this.radioList.forEach(item => {
        if (item.value === 'selfRadio') {
          const status = value === 'selfRadio'
          item.disabled = !status
        }
      })
    },
    // 特殊处理自定义的输入框的默认值
    initCustomInputValue() {
      if (this.isSetting) return
      const { customSetDefault, inputValue, handleCustomResult } = this.instance
      if (customSetDefault) {
        // 如果是含有输入框的radio
        this.radioInputValue = inputValue
        const v = inputValue || undefined
        // this.$emit('initSettingCustomRadioInputValue', v)
        this.$emit('setFormModelValue', 'inputValue', v)
        if (handleCustomResult) {
          handleCustomResult.call(this, this.instance, inputValue)
        }
      }

      // if(defaultValue) {
      //   let v = defaultValue === -1 ? -1 : 'selfRadio'
      //   this.defaultValue = v // 让自定义
      //   if(v !== -1) {
      //     this.radioValue = defaultValue
      //     !isEdit && this.resetForbidden('selfRadio')
      //     !isEdit && this.$emit('setFormModelValue', 'inputValue', 0)
      //   }
      //   this.isSetting = true
    },
    changeRadio(target) {
      const value = target.value
      this.resetSelfInput(value)
      // this.settingCustomRadioInputValue(undefined)
      this.$emit('change', value)
    }
  }
}
</script>
